<template>
  <el-dialog v-model="dialogVisible" draggable title="新增导航" width="30%">
    <el-form ref="formRef" :model="basicForm" status-icon :rules="rules" label-width="80px">
      <el-form-item required label-width="80px" label="菜单类型">
        <el-radio-group v-model="basicForm.type">
          <el-radio-button :label="1">导航</el-radio-button>
          <el-radio-button :label="2">内容</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="导航名称" prop="name">
        <el-input v-model="basicForm.name" clearable autofocus placeholder="请输入导航名称" />
      </el-form-item>
      <template v-if="basicForm.type === 2">
          <el-form-item label="导航目录" prop="navId">
              <el-select v-model="basicForm.navId" clearable placeholder="请选择导航分类" style="width: 100%;">
                  <el-option v-for="item in selectList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
          </el-form-item>
        <el-form-item label="内容描述" prop="label">
          <el-input v-model="basicForm.label" clearable autofocus placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="外链地址" prop="href">
          <el-input v-model="basicForm.href" clearable autofocus placeholder="请输入url地址" />
        </el-form-item>
        <el-form-item label="图标地址" prop="icon">
          <el-input v-model="basicForm.icon" clearable autofocus placeholder="请输入图标地址" />
        </el-form-item>
      </template>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleConfirm"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { rules } from '../options/rules'
import { ref } from 'vue'
import type { FormInstance } from 'element-plus'
import { getNavSaveApi, getNavListApi, getNavUpdateApi } from '../api/index'
import { ElMessage } from "element-plus";

const emit = defineEmits(['refresh'])

const formRef = ref<FormInstance>()
let basicForm = reactive<any>({
  type:1,
  name:'',
  navId:'',
  icon:'',
  href:'',
  label:''
})

const dialogVisible = ref(false)
let loading = ref(false)
const handleConfirm = () => {
  formRef.value.validate(async isValid => {
    if (!isValid)return
    loading.value = true
    try {
      if (basicForm.id){
        const {message} = await getNavUpdateApi(toRaw(basicForm))
        ElMessage({
          message,
          type: 'success',
        })
      }else {
        const {message} = await getNavSaveApi(toRaw(basicForm))
        ElMessage({
          message,
          type: 'success',
        })
      }
      emit('refresh')
      dialogVisible.value = false
    }finally {
      loading.value = false
    }
  })
}

let selectList = shallowRef([])
const openDialog = async (row) => {
  dialogVisible.value = true
  if (row){
    basicForm.id = row.id
    Object.keys(toRaw(basicForm)).forEach(key => {
      basicForm[key] = row[key]
    })
  }else {
    await nextTick()
    formRef.value.resetFields()
  }
  Object.hasOwn(row ?? {},'children') ? basicForm.type = 1 : basicForm.type = 2
  const {data} = await getNavListApi()
  selectList.value = data
}
defineExpose({
  openDialog,
})
</script>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
